<template>
    <div>
        <!-- 商品详情页面 -->
        <!-- 分享面板组件  -->
        <share ref="p1"></share>
        <!-- 轮播图组件 -->
        <div class="top">
            <van-icon name="share" @click="changeFn" class="share" color="gold" />
            <van-icon name="arrow-left" class="back" @click="backFn" />
            <productSwiper :bannerArr="bannerArr"></productSwiper>
        </div>
        <!-- 商品描述1 -->
        <ul class="duihao">
            <li></li>
        </ul>
        <!-- 商品描述2 -->
        <h3 class="d1">{{ describe2.name }}</h3>
        <p class="d2">{{ describe2.goods_brief }}</p>
        <div class="d3">￥{{ describe2.retail_price }}元</div>
        <!-- 商品参数 -->
        <goodsParameterVue :goodsParameter="goodsParameter"></goodsParameterVue>
        <van-divider>产品详情</van-divider>
        <div v-html="detialImg" class="goods_desc"></div>
        <!-- 常见问题 -->
        <ul class="problems">
            <li v-for="item in problemsArr" :key="item.id">
                <h3>{{ item.question }}</h3>
                <p>{{ item.answer }}</p>
            </li>
        </ul>
        <!-- 相关产品 -->
        <van-divider>相关产品</van-divider>
        <!-- 相关产品组件 -->
        <relevantProductVue :relevantProductArr="relevantProductArr"></relevantProductVue>
        <!-- 商品导航组件 -->
        <goodsActionVue :list_pic_url="list_pic_url" :retail_price="retail_price" :goods_number="goods_number"
            :productid="productid"></goodsActionVue>

        <!-- 返回顶部 -->
        <van-icon name="back-top" class="toTop" ref='toTop' />




    </div>
</template>

<script>
import { getProductsListApi, relevantProductsListApi } from '@/api/productDetialApi.js'
// 引入相关产品组件
import relevantProductVue from './relevantProduct.vue';
// 引入底部商品导航组件
import goodsActionVue from './goodsAction.vue';
// 引入轮播图组件
import productSwiper from '@/components/productDetial/productSwiper.vue'
// 引入商品参数组件
import goodsParameterVue from './goodsParameter.vue';
// 引入分享面板组件
import share from '@/components/productDetial/shareCom.vue'
export default {
    name: '',
    data() {
        return {
            id: localStorage.getItem('goodsId'),//商品id，也就是地址栏的id
            productid: '',//产品id，来自productList的第一个数组项中的id
            bannerArr: [],
            describe1: [],
            describe2: [],
            goodsParameter: [],//商品参数
            detialImg: '',
            problemsArr: [],
            relevantProductArr: [],
            showShare: false,//分享面板是否显示
            list_pic_url: '',//点击加购后弹出的商品规格中的图片
            retail_price: '',//点击加购后弹出的商品规格中的价格
            goods_number: '',//当前商品库存
        };
    },
    components: {
        relevantProductVue,
        goodsActionVue,
        productSwiper,
        goodsParameterVue,
        share
    },
    created() {
        // 调用获取产品明细数据列表
        getProductsListApi({ id: this.id }).then(res => {
            console.log('产品明细', res.data.data);
            this.bannerArr = res.data.data.gallery
            this.describe2 = res.data.data.info
            this.goodsParameter = res.data.data.attribute
            this.detialImg = res.data.data.info.goods_desc
            this.problemsArr = res.data.data.issue

            this.list_pic_url = res.data.data.info.list_pic_url
            this.retail_price = res.data.data.info.retail_price
            this.goods_number = res.data.data.info.goods_number
            console.log(this.goods_number);

            this.productid = res.data.data.productList[0].id
            // console.log('地址栏当前商品id',this.id);
            console.log('产品id', this.productid);

        }),
            // 调用相关产品接口
            relevantProductsListApi({ id: this.id }).then(res => {
                console.log("相关产品", res);
                this.relevantProductArr = res.data.data.goodsList
            })


    },
    mounted() {
        //功能1：当页面距离大于多少时再显示返回顶部的按钮
        let topButton = this.$refs.toTop
        console.log(topButton);
        window.onscroll = function () {
            //让谁进行滚动 body html（有的浏览器获取不到body或html），所以做一个兼容的方式
            //scrollTop据顶部的滑动的距离，res是当前滚动条距离页面顶部的距离
            let currentLocation = document.body.scrollTop || document.documentElement.scrollTop;
            if (currentLocation >= 600) {//当大于400px，按钮出现
                topButton.style.display = 'block';
            } else {
                topButton.style.display = 'none';
            }
        }
        //功能2：点击按钮缓动回到顶部
        topButton.onclick = function () {
            var currentLocation = document.body.scrollTop || document.documentElement.scrollTop;// 获取当前滚动条的位置
            var task = setInterval(function () {  // setInterval循环周期调用
                if (currentLocation > 0) {
                    window.scrollTo(0, currentLocation);
                    currentLocation -= 100 // 相比上次位置减10，根据自己需要的速度修改
                } else {
                    window.scrollTo(0, 0);
                    clearInterval(task)  //回到顶部后，清除已执行的的循环事件
                }
            }, 1)
        }
    },
    methods: {
        backFn() {
            //返回上一页
            this.$router.go(-1)
        },
        changeFn() {
            console.log('分享面板子组件中的showShare', this.$refs.p1.showShare);
            this.$refs.p1.showShare = true
        }
    }


}

</script>
<style scoped lang="less">
.top {
    position: relative;

    .share {
        position: absolute;
        font-size: 20px;
        top: 10px;
        right: 10px;
        z-index: 999;
    }

    .back {
        position: absolute;
        font-size: 20px;
        top: 10px;
        left: 10px;
        z-index: 999;
    }
}

.d1 {
    width: 100%;
    height: 19px;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
}

.d2 {
    width: 100%;
    height: 13px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.d3 {
    width: 100%;
    height: 13px;
    text-align: center;
    font-size: 12px;
    color: #8B0000;
    margin-top: 10px;
}

/deep/.goods_desc {
    p {
        img {
            width: 100%;
        }
    }
}

.problems {
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    li {
        width: 345px;
        height: 25%;

        h3 {
            font-size: 16px;
            width: 100%;
            display: flex;
            align-items: center;
            margin: 6px auto;
        }

        h3::before {
            content: '·';
            font-size: 26px;
            color: #8B0000;

        }

        P {
            margin: 6px auto;
            width: 100%;
            font-size: 12px;
            line-height: 15px;
        }
    }
}

.toTop {
    font-size: 30px;
    position: fixed;
    right: 10px;
    bottom: 60px;
    display: none;
}
</style>